<template>
    <div class="footer">
      <router-link to="/home">
        <li class="iconfont icon-shouye"></li>
        <span>首页</span>

      </router-link>
      <router-link to="/list">
        <li class="iconfont icon-liebiao"></li>
        <span>列表</span>

      </router-link>
      <router-link to="/collect">
        <li class="iconfont icon-ego-fav"></li>
        <span>购物车</span>

      </router-link>
      <router-link to="/add">
        <li class="iconfont icon-tianjia"></li>
        <span>添加</span>

      </router-link>
    </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .footer{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    display: flex;
    border: 1px solid #ccc;
    a{//让a标签里的li 和span垂直排列
      display: flex;
      color: greenyellow;
      flex-direction: column;
      flex: 1;
      align-items: center;//水平居中
      justify-content: center;//
    }
    a.router-link-active{
      color: red;
    }
  }
</style>
